<template>
   <div>
       <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"   :autoFill="autoFill" ref="loadmore">
      <mt-cell v-for="(item) in assetlists" :key="item.assetid" @click.native="choiceNew(item.assetid)" v-if="type">
         <div slot="title" class="title">
          <img :src="item.assetimageurl"/>
          <div class="desc">
             <div class="name">{{item.assetname}}</div>
             <div class="location">{{item.Alocation}}</div>
          </div>
          </div>
      </mt-cell>

      <mt-cell v-for="(item) in assetlists" :key="item.assetid"  v-if="!type">
         <div slot="title" class="title">
          <img :src="item.assetimageurl"/>
          <div class="desc">
             <div class="name">{{item.assetname}}</div>
             <div class="location">{{item.Alocation}}</div>
          </div>
          </div>
          <mt-button  size="small" type="primary" @click.native="measure(item.assetid)" v-show="!type">测量</mt-button>
      </mt-cell>
    </mt-loadmore>
    <not-data-page v-show="!assetlists.length"></not-data-page>
    </div>
</template>
<script>
import notDataPage from '@/component/notQueryDataPage.vue'
import { Toast } from 'mint-ui'

export default {
  props: {
    type: String
  },
  data () {
    return {
      addImg: require('@/assets/image/add.svg'),
      autoFill: false,
      allLoaded: false,
      assetlists: [],
      pages: 0,
      parm: {
        page: 1,
        pagesize: 20,
        siteid: '',
        isassigned: 'YES'
      }

    }
  },
  created () {
    if (this.type) {
      this.parm.isassigned = 'NO'
    }
    this.getassetsList(0)
  },
  computed: {
    siteid () {
      return this.$store.state.user.sitelist[0].siteid
    }
  },
  methods: {
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pages < this.parm.pagesize) {
        this.allLoaded = true
        return
      }
      this.parm.page++
      await this.getassetsList(1)
    },
    // 测量方法
    measure (assetid) {
      const query = {
        assetid
      }
      this.$router.push({path: '/measure', query})
    },
    async getassetsList (type) {
      this.parm.siteid = this.siteid
      const res = await this.$store.dispatch('assetsList', this.parm)
      if (res.status === '0') {
        this.pages = res.context && res.context.assetlists ? res.context.assetlists.length : 0
        type ? this.assetlists = [...this.assetlists, ...res.context.assetlists] : this.assetlists = [...res.context.assetlists]
      }
    },
    async choiceNew (assetid) {
      const parm = {
        assetid,
        deviceid: this.$route.query.deviceid,
        spectoken: this.$route.query.spectoken
      }
      const res = await this.$store.dispatch('assign', parm)
      if (res.state === '0') {
        Toast({
          message: '指派成功',
          duration: 2000
        })
        this.$router.go(-1)
      }
    }
  },
  components: {
    notDataPage
  }

}
</script>
<style lang="less" scoped>
  .title{
    padding: 10px;
    img{
      height: 60px;
      width: 60px;
      border-radius: 6px;
      float: left;
    }
    .desc{
      display: inline-block;
      margin-left: 10px;
      width: 200px;
      &>div{
        word-break: keep-all;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
        height: 30px;
        line-height: 30px;
      }
      .location{
        color: #ccc;
      }
    }
  }
</style>
